<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

 
        // 指定图表的配置项和数据
        var option1 = 
            {
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['W1','W2','P1','P2']
            },
            xAxis: {
                type:'category',
                data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
            },
            yAxis:[
                {
                    show:true,
                    type:'value',
                    axisLine:{
                    onZero:false,
                    lineStyle:{
                        color:'#666'
                    }
                    },
                    position:'left',
                    name:'温度',
                    nameLocation:'end',
                    nameTextStyle:{
                    color:'#306090'
                    }
                },
                {
                show:'true',
                type:'value',
                axisLine:{
                onZero:false,
                },
                name:'压强',
                position:'right',
                nameLocation:'end'
                }
                ],
            series:[
                {
                name: 'W1',
                data:[820,932,901,934,1290,1330,1320],
                type:'line',
                yAxisIndex:0,
                symbol:'none',
                smooth: 0.4,
                itemStyle:{
                    normal:{
                    color:'red'
                    }
                }
                },
                {
                name: 'W2',
                data:[369,248,147,369,985,211,689],
                type:'line',
                yAxisIndex:0,
                symbol:'none',
                smooth: 0.4,
                itemStyle:{
                    normal:{
                    color:'blue'
                    }
                }
                },
                {
                name:'P1',
                data:[10,20,30,40,55,88,77,],
                type:'line',
                yAxisIndex:1,
                symbol:'none',
                smooth: 0.4,
                },
                {
                name:'P2',
                data:[120,208,55,88,309,188,277,],
                type:'line',
                yAxisIndex:1,
                symbol:'none',
                smooth: 0.4,
                }
            ]
            };
        var data = [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
         ];
         var data1 = [
            ['时间',1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42], 
            ['内室温度',820,932,901,934,1290,1330,1320,820,932,901,934,1290,1330,1320,820,932,901,934,1290,1330,1320,820,932,901,934,1290,1330,1320,820,932,901,934,1290,1330,1320,820,932,901,934,1290,1330,1320],
            ['夹层温度',369,248,147,369,985,211,689,369,248,147,369,985,211,689,369,248,147,369,985,211,689,369,248,147,369,985,211,689,369,248,147,369,985,211,689,369,248,147,369,985,211,689],   
            ['内室压力',10,20,30,40,55,88,77,10,20,30,40,55,88,77,10,20,30,40,55,88,77,10,20,30,40,55,88,77,10,20,30,40,55,88,77,10,20,30,40,55,88,77],
            ['夹层压力',120,208,55,88,309,188,277,120,208,55,88,309,188,277,120,208,55,88,309,188,277,120,208,55,88,309,188,277,120,208,55,88,309,188,277,120,208,55,88,309,188,277],
         ]

            var option2 = {
            legend: {},
                tooltip: {
                    trigger: 'axis',
                },
                dataset: {
                    source: data1
                },
                xAxis: [
                    {type: 'category'},
                    
                ],
                yAxis: [
                {
                    show:true,
                    type:'value',
                    axisLine:{
                    onZero:false,
                    lineStyle:{
                        color:'#666'
                    }
                    },
                    position:'left',
                    name:'温度',
                    nameLocation:'end',
                    nameTextStyle:{
                    color:'#306090'
                    }
                },
                {
                show:'true',
                type:'value',
                axisLine:{
                onZero:false,
                },
                name:'压强',
                position:'right',
                nameLocation:'end'
                }
                    
                ],
                grid: [
                    {bottom: '55%'},
                    {top: '55%'}
                ],
                series: [
                    // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
                    {type: 'line', seriesLayoutBy: 'row',smooth:true,symbol:'none'}, //smooth圆滑轨迹，symbol是否有点，默认Y1轴
                    {type: 'line', seriesLayoutBy: 'row',smooth:true,symbol:'none'},
                    {type: 'line', seriesLayoutBy: 'row',yAxisIndex:1,smooth:true,symbol:'none'}, 
                    {type: 'line', seriesLayoutBy: 'row',yAxisIndex:1,smooth:true,symbol:'none'},
                ]
            }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option2);
    </script>
</body>
</html>